import { Form, Input, Button, Space, Table, Modal, message, Card } from 'antd'
import type { FormProps, TableProps } from 'antd';
import axios from '../utils/axios'
import '../App.css'
import { useNavigate } from 'react-router-dom'
import { useEffect, useState } from 'react';
type FieldType = {
	title?: string;
};
interface FieldTypeModal {
	title: string,
	content: string
	authorId: number
}
interface DataType {
	key: string;
	name: string;
	age: number;
	address: string;
	tags: string[];
}


const Message = () => {
	const navigate = useNavigate()
	const columns: TableProps<DataType>['columns'] = [
		{
			title: 'ID',
			dataIndex: 'id',
			key: 'id',
			render: (text) => <a>{text}</a>,
		},
		{
			title: 'Firstname',
			dataIndex: 'title',
			key: 'title',
			render: (text, record) => (
				<Space size="middle">
					<span onClick={() => jumpArticleDetailHandle(record)}>{text}</span>
				</Space>
			),
		},
		{
			title: 'lastname',
			dataIndex: 'content',
			key: 'content',
		},
		{
			title: 'username',
			key: 'viewCount',
			dataIndex: 'viewCount',
		},
		{
			title: '操作',
			key: 'action',
			render: (_, record) => (
				<Space size="middle">
					<Button onClick={() => editHandle(record)}>编辑</Button>
					<Button danger>删除</Button>
				</Space>
			),
		},
	];
	const [page, setPage] = useState(1)
	const [pageSize, setPageSize] = useState(10)
	const [isModalOpen, setIsModalOpen] = useState(false);
	const [isView, setIsView] = useState<boolean>(true)
	const [form] = Form.useForm()
	const [data, setData] = useState([])
	const [id, setId] = useState(null)
	const getDataList = async (title?: string) => {
		const res = await axios.get('/article/list', {
			params: {
				page,
				pageSize,
				keyword: title
			}
		})
		// console.log(res)
		const { data, status } = res
		if (status === 200) {
			setData(data.rows)
			// setTotal(data.count)
		}
	}
	useEffect(() => {
		getDataList()
	}, [])
	//  跳转到文章详情
	const jumpArticleDetailHandle = (record: any) => {
		console.log(record.id)
		navigate(`/home/articleDetail/?id=${record.id}`)
	}
	// 搜索
	const onFinish: FormProps<FieldType>['onFinish'] = (values) => {

		const { title } = values
		getDataList(title)
	};
	// 重置
	const resetHandle = () => {
		getDataList()
	}
	// modal
	const handleOk = () => {
		setIsModalOpen(false);
	};
	const handleCancel = () => {
		setIsModalOpen(false);
	};
	// 新增
	const addHandle = () => {
		setIsModalOpen(true)
		setIsView(true)
		form.resetFields()
	}
	// 编辑
	const editHandle = (record: any) => {
		console.log(record)
		setIsModalOpen(true)
		setIsView(false)
		form.setFieldsValue(record)
		setId(record.id)
	}
	// 
	const EditAndAddHandle = async (values: any) => {
		console.log(values)
		if (isView) {
			const res = await axios.post('/article', {
				title: values.title,
				content: values.content,
				authorId: 47529555
			})
			console.log(res)
			const { status } = res
			if (status === 200) {
				getDataList()
				message.success('新增成功')
			}
		}
		else {
			const res = await axios.put(`/article/${id}`, { ...values })
			console.log(res)
			const { status } = res
			if (status === 204) {
				getDataList()
				message.success('编辑成功')
			}
		}
		setIsModalOpen(false)
	}
	return (
		<div className='table'>
			<Card title="Default size card">
				{/* 顶部搜索 */}
				<div className='top'>
					<Form
						className='top-form'
						name="basic"
						style={{ maxWidth: 700 }}
						initialValues={{ remember: true }}
						onFinish={onFinish}
						autoComplete="off"
					>
						<Form.Item<FieldType>
						>
							<Button type='primary' onClick={() => addHandle()}>新增</Button>
						</Form.Item>
						<Form.Item label={null}>
							<Button type="primary" htmlType="submit">
								搜索
							</Button>
						</Form.Item>
						<Form.Item label={null}>
							<Button type="primary" htmlType="reset" onClick={() => resetHandle()}>
								重置
							</Button>
						</Form.Item>
						<Form.Item<FieldType>
							label="标题"
							name="title"
						>
							<Input />
						</Form.Item>
					</Form>
				</div>
				<div>
					<Table<DataType> rowKey='id' columns={columns} dataSource={data} pagination={false} />
				</div>
				<Modal
					title={isView ? '新增' : '编辑'}
					closable={{ 'aria-label': 'Custom Close Button' }}
					open={isModalOpen}
					cancelText='取消'
					okText='确定'
					onOk={handleOk}
					onCancel={handleCancel}
				>
					<Form
						form={form}
						name="basic1"
						labelCol={{ span: 8 }}
						wrapperCol={{ span: 16 }}
						style={{ maxWidth: 700 }}
						initialValues={{ remember: true }}
						onFinish={EditAndAddHandle}
						autoComplete="off"
					>
						<Form.Item<FieldTypeModal>
							label="标题"
							name="title"
						>
							<Input />
						</Form.Item>
						<Form.Item<FieldTypeModal>
							label="内容"
							name="content"
						>
							<Input />
						</Form.Item>
						<Form.Item label={null}>
							<Button type="primary" htmlType="submit">
								{isView ? '添加' : '保存'}
							</Button>
						</Form.Item>
					</Form>
				</Modal>
			</Card>
		</div>
	)
}

export default Message